<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历操作</title>
		<!--元素遍历操作 ：针对DOM树中元素进行遍历【父子级关系】
		    chidlren()    功能：获取匹配元素集合中每个元素的直接子元素
			parent()      功能：获取匹配元素集合中每个元素的直接父元素
			
			siblings()    功能：获取匹配元素集合中每个元素的所有兄弟元素
			
			next()        功能：获取匹配元素集合中每个元素的上一个兄弟元素
			prev()        功能：获取匹配元素集合中每个元素的下一个兄弟元素
			
			each()        功能：遍历匹配元素集合，对每个元素执行指定的函数
		-->
		<style>
			.container{
				border: 1px solid #181816;
				margin: 10px;
				padding: 10px;
			}
			.box{
				background-color: #ffaaff;
				padding: 10px;
				margin: 10px;
			}
			button{
			    margin: 10px;	
			}
			
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子1</div>
			<div class="box" id="box3">盒子1</div>
			<div class="box" id="box4">盒子1</div>
		</div>
		<button id="getcrBtn">获取直接子元素</button>
		<button id="getpBtn">获取父元素</button>
		<button id="getsbtn">获取所有元素</button>
		<button id="getnbtn">获取下一个元素</button>
		<button id="getpbtn">获取上一个兄弟元素</button>
		<button id="eachbtn">遍历元素</button>
		<script>
			/* 1.点击 获取直接子元素 按钮  .container父元素 给.box元素加10px */
			$("#getcrBtn").click(function(){
				$(".container").children().css("border","10px solid #f00");
			});
			/* 2.点击 获取父元素 按钮 .container 加背景色 */
			$("#getpBtn").click(function(){
				$("#box2").parent().css("background-color","#ff0");
			});
			// 3.点击 获取兄弟元素 按钮 box3的兄弟元素 加背景色 ：#f00；
			$("#getsbtn").click(function(){
				$("#box3").siblings().css("background-color","#f00");
			});
			/* 4.点击 获取下一个兄弟元素 按钮 box2的下一个元素  */
			$("#getnbtn").click(function(){
				$("#box2").next().css("background-color","#eee");
			});
			/* 5.点击 获取上一个兄弟元素 按钮 box4的上一个元素 圆、阴影、字体放大 */
			$("#getpbtn").click(function(){
				$("#box4").prev().css({"width":"100px",
				                    "height":"100px",
									"background-color":"#ff0",
									"border-radius":"50%",
									"text-shadow":"5px 5px 10px #ff0",
									"font-size":"2em",
									"line-height":"200px",
									"text-align":"center"
									})
			})
			/* 6.点击 遍历元素 按钮 实现 动态输出这是box1 .....
			 each(function(index,element){传入下标￥{index}})
			 */
			$("#eachbtn").click(function(){
				$(".box").each(function(i,e){//i 下标|e 元素 --形参
					$(e).text('这是第${i}盒子');
				})
			});
		</script>
	</body>
</html> 